<template>
    <div>
        <!-- 头部导航 -->
        <div v-show="state">登陆了</div>
        <div v-show="!state">没登陆</div>
        <div class="top">
            <div class="top_content">
                <div class="top_content_logo">
                    <img src="../../assets/images/logo.png" alt="">
                </div>
                <span class="top_content_input">
                    <input type="text" placeholder="搜索课程">
                    <span class="top_content_input_content">
                        <span>
                            <img src="../../assets/images/sousuo.png" alt="">
                        </span>
                        <span>搜索</span>
                    </span>

                </span>
                <span class="top_content_sigoin">
                    <span class="top_content_sigoin_1">
                        <a-badge :count="Number(carNum)">
<!--                            <a href="#" class="head-example" />-->
                            <router-link tag="span" to="/BuyCar" >
                                <img src="../../assets/images/gouwuchezhengpin.png" alt="">
                            </router-link>

                        </a-badge>
                    </span>
                    <span >
                        <span v-show="state">
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <span class="top_content_sigoin_2">{{name.nickname}}</span>
                                    <span class="top_content_sigoin_3">
                                        <img src="../../assets/images/yonghu.png" alt="">
                                    </span>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item>
                                        <a href="javascript:;">个人中心</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;">我的课程</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;">我的订单</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;" @click="LogOut">退出登录</a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>

                        </span>
                        <span v-show="!state" @click="alertLogin">
                            <span class="top_content_sigoin_2">注册/登录</span>
                            <span class="top_content_sigoin_3">
                                <img src="../../assets/images/yonghu.png" alt="">
                            </span>
                        </span>

                    </span>

                </span>
            </div>
            <div style="clear: both;"></div>
            <!-- 导航 -->
            <div class="top_nevigation">
                <ul class="top_nevigation_content">
                    <li class="top_nevigation_content_1">首页</li>
                    <li class="top_nevigation_content_2">
                        <span>

                            <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    课程分类 <a-icon type="down"/>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item v-for="(item,index) in title" :key="index">
                                        <a href="javascript:;">{{item.title}}</a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </span>
                    </li>
                    <li class="top_nevigation_content_3">专属课程</li>
                </ul>

            </div>
        </div>
        <Login v-show="flags"></Login>
    </div>
</template>

<script>
    import {getList,userLogOut} from '../../api/Tlmusic'
    import Login from '../otherComponents/Login'
    import {mapState} from 'vuex'
    export default {
        name: "TitleOne",
        components:{
            Login
        },
        data() {
            return {
                enable: 1,
                title: [{}],
                flag:false,
                userInfo:{},
            }
        },
        created() {
            getList(this.enable).then(res => {
                this.title = res.rows
            })

            this.$store.dispatch("getUserInfo")
            this.$store.dispatch("getBuyCarInfo")
        },
            methods: {
                alertLogin() {
                    this.flag = !this.flag
                    this.$store.commit("alertBuyCar", {flag:this.flag})
                },
                LogOut(){

                    userLogOut().then(res=>{

                        this.$store.commit("changelogin", {userInfo:{},isLogin: false})

                    } )
                }
            },
        computed:{
                 ...mapState({
                     name:"userInfo",
                     state:'isLogin',
                     carNum:'carNum',
                     flags:'flag'
                 })
        }



    }
</script>

<style scoped lang="less">
.ant-dropdown-link{
    color: black;
}
    /* 设置头部 */
    /* logo */
    .top {
        overflow: hidden;
    }

    .top_content {
        margin-top: 22px;
    }

    .top_content_logo {
        width: 13.7%;
        float: left;
        margin-left: 3.4%;
    }

    .top_content_logo > img {
        width: 100%;
    }

    /* input输入框 */
    .top_content_input {
        width: 30.5%;
        display: inline-block;
        margin-left: 15%;
        position: relative;
    }

    .top_content_input > input {
        width: 79.5%;
        height: 35px;
        line-height: 35px;
        border-radius: 15px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        /* text-decoration: none; */
        text-indent: 1em;
    }

    .top_content_input > input:hover {
        border-color: #00cf8c;
    }

    .top_content_input_content {
        display: inline-block;
        height: 36px;
        line-height: 35px;
        width: 17.5%;
        background-color: #00cf8c;
        /*vertical-align: middle;*/
        margin-left: -5px;
        border: 1px solid #cccccc;
        border-radius: 15px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        color: white;
        cursor: pointer;
    }

    .top_content_input_content > span > img {
        position: absolute;
        width: 5%;
        top: 10px;
        right: 15%;
    }

    .top_content_input_content > span:nth-of-type(2) {
        margin-left: 43%;
    }

    /* 登录注册 */
    .top_content_sigoin {
        margin-left: 13.7%;
        cursor: pointer;
    }

    .top_content_sigoin_1 {
        border-right: 1px solid #cccccc;
        padding-right: 10px;
    }

    .top_content_sigoin_2 {
        margin-left: 10px;
    }

    .top_content_sigoin_3 {
        margin-left: 5px;
        width: 2.3%;
        height: 32px;
        background-color: #cccccc;
        border-radius: 20px;
        text-align: center;
        line-height: 32px;
        display: inline-block;
    }

    /* 导航栏（三个） */
    .top_nevigation {
        margin-top: 34px;
        position: relative;
    }

    .top_nevigation_content {
        margin-left: 3.4%;
    }

    .top_nevigation_content > li {
        float: left;
    }

    .top_nevigation_content_1 {
        color: #00cf8c;
        border-bottom: 2px solid #00cf8c;
        padding-bottom: 8px;
        cursor: pointer;
    }

    .top_nevigation_content_2 {
        margin-left: 2%;
        cursor: pointer;
    }

    .top_nevigation_content_3 {
        margin-left: 2%;
        cursor: pointer;
    }

    /* 下拉列表 */
    .top_nevigation_list {
        position: absolute;
        top: 140px;
        left: 9%;
        background-color: white;
        color: #595959;
        font-size: 14px;
        width: 130px;
        display: none;
    }

    .top_nevigation_list > li {
        padding: 5px 0px 10px 3px;
        cursor: pointer;

    }

    .top_nevigation_list > li:nth-of-type(1) {
        margin-top: 5px;
    }

    .top_nevigation_list > li > a {
        text-decoration: none;
        background-color: white;
        color: #595959;
    }

    .a1 {
        width: 100%;
        height: 100%;
    }


</style>